<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>

<%
	if (request.getAttribute("projects") == null) {
		response.sendRedirect("/film/project/listProjects.do?page=1&max=2");
	}
%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Home Page</title>
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="/film/js/jquery.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    <script src="/film/bootstrap/js/typeahead.js"></script>

	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	    </style>
	</head>
	
	<body>
		<jsp:include page="navigationBar.jsp"/>	
		 <div class="container">
			 <div class="content-container">
			 	<c:forEach var="p" items="${projects}">
				 	<div class="media">
				 		<a class="pull-left" href="#">
				 			<c:if test="${p.thumbnailUrl != null}">
					 			<img style="width:200px;height:160px;" class="media-object" src="/film/photo/getPhoto.do?fileName=${p.thumbnailUrl}">
					 		</c:if>
					 		
					 		<c:if test="${p.thumbnailUrl == null}">
					 			<img class="media-object" src="http://placehold.it/200x160">
					 		</c:if>
				 		</a>
				 		<div class="media-body">
				 			<a href="#"><h3 class="media-heading projectTitle" pid="${p.id}">${p.projectName}</h3></a>
				 			${p.description}
				 		</div>
				 	</div>
				 	<hr size=3>
			 	</c:forEach>
			 	
			 	<div class="pagination pagination-centered">
			 		<ul>
			 			<c:if test="${page == null or page == 1}">
				 			<li><a page="1" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1}">
				 			<li><a page="${page - 1}" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page == null or page == 1 or page == 2}">
				 			<li><a page="1" href="#">1</a></li>
							<li><a page="2" href="#">2</a></li>
							<li><a page="3" href="#">3</a></li>
							<li><a page="4" href="#">4</a></li>
							<li><a page="5" href="#">5</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1 and page != 2}">
				 			<li><a page="${page - 2}" href="#">${page - 2}</a></li>
							<li><a page="${page - 1}" href="#">${page - 1}</a></li>
							<li><a page="${page}" href="#">${page}</a></li>
							<li><a page="${page + 1}" href="#">${page + 1}</a></li>
							<li><a page="${page + 2}" href="#">${page + 2}</a></li>
				 		</c:if>
						
						<c:if test="${page == null}">
				 			<li><a page="2" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null}">
				 			<li><a page="${page + 1}" href="#">Next</a></li>
				 		</c:if>
					</ul>
				</div>
			 </div>
	 	</div>
	</body>
	
	<script type="text/javascript">
	    $(".pagination a").click(function() {
	    	var page = $(this).attr("page");
	    	window.location.href = ("/film/project/listUserProjects.do?userId=" + ${user.id} + "&page=" + page  + "&max=" + <%=request.getParameter("max")%>);
	    });
	    
	    $("#userProjects").click(function() {
	    	if ($(this).attr("page") == undefined) {
	    		var page = 1;
	    	} else {
	    		var page = $(this).attr("page");
	    	};
	    	
	    	window.location.href = ("/film/project/listUserProjects.do?userId=" + ${user.id} + "&page=" + page  + "&max=" + <%=request.getParameter("max")%>);
	    });
	    
	    $(".projectTitle").click(function() {
	    	var pid = $(this).attr("pid");
	    	window.location.href = "/film/project/getProject.do?pid=" + pid;
	    });
	    
	  
	</script>
	
	<script src="/film/js/commonScripts.js"></script>
</html>